<template>
  <div class="indicator-card">
    <div class="title">指标统计</div>
    <div class="model-wrapper">
      <img src="@/assets/images/hexagon-base.png" class="base-image" alt="base" />
      <div class="value">{{ mainValue }}</div>
    </div>
    <div class="stats">
      <div class="stat-item gradient-bg">
        <div class="label">累计能耗：</div>
        <div class="value">{{ powerConsumption }} kw-h</div>
      </div>
      <div class="stat-item gradient-bg" style="margin-top:7px">
        <div class="label">累计冷量：</div>
        <div class="value">{{ coolingCapacity }} RT</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndicatorCard',
  props: {
    mainValue: {
      type: [Number, String],
      required: true
    },
    powerConsumption: {
      type: [Number, String],
      required: true
    },
    coolingCapacity: {
      type: [Number, String],
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.indicator-card {
  background: linear-gradient(180deg, #0A2E5C 0%, #061832 100%);
  border-radius: 8px;
  padding: 24px;
  color: white;
  
  .title {
    width: 80px;
    height: 22px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }

  .model-wrapper {
    position: relative;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px 0;

    .base-image {
      width: 100%;
      max-width: 300px;
      height: auto;
    }

    .value {
      position: absolute;
      top: 28%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      font-weight: bold;
      color: #00E1FF;
      text-shadow: 0 0 10px rgba(0, 225, 255, 0.5);
      z-index: 2;
    }
  }

  .stats {
    margin-top: 24px;
    
    .stat-item {
      display: flex;
      align-items: center;
      height: 56px;
      
      &.gradient-bg {
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          left: -24px;
          right: -24px;
          top: 0;
          height: 56px;
          background: linear-gradient(
            90deg, 
            rgba(2,31,79,0) 0%, 
            #009CFF 48%, 
            #009CFF 49%, 
            rgba(2,31,79,0) 100%
          );
          opacity: 0.6;
          z-index: 1;
        }
        
        .label, .value {
          position: relative;
          z-index: 2;
          display: flex;
          align-items: center;
          height: 100%;
        }
        
        .label {
          width: 120px;
          font-size: 20px;
          color: #FFFFFF;
        }

        .value {
          font-size: 16px;
          color: #FFFFFF;
          margin-left: 5px;
        }
      }

      & + .gradient-bg {
        margin-top: 7px;
      }
    }
  }
}
</style> 